<template>
  <div class="sitedetail">
    <div class="mains_contain">
      <div class="back" @click="$router.go(-1)">
        <i class="el-icon-back"></i>
        <span>返回</span>
      </div>
      <div class="top">
        <div>
          <span>站点名称：</span>
          <span>{{ infoData && infoData.sitesName }}</span>
        </div>
        <div>
          <span>设备总数：</span>
          <span>{{ infoData && infoData.allLineCount }}</span>
        </div>
      </div>
      <div class="contant">
        <el-table :data="tableData1" style="width: 100%; margin-top: 10px" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="nodeId" label="设备标识" show-overflow-tooltip />
          <el-table-column prop="url" label="公司名称" />
          <el-table-column prop="url" label="设备型号" />
          <el-table-column prop="url" label="芯片型号" />
          <el-table-column prop="url" label="操作系统" />
          <el-table-column prop="status" label="设备状态">
            <template slot-scope="scope">
              <!-- <el-tag
                effect="dark"
                size="mini"
                type="success"
                v-if="scope.row.status == 'ONLINE'"
                >在线</el-tag
              >
              <el-tag
                effect="dark"
                size="mini"
                type="danger"
                v-if="scope.row.status == 'OFFLINE'"
                >离线</el-tag
              >
              <el-tag
                effect="dark"
                size="mini"
                type="warning"
                v-if="scope.row.status == 'INACTIVE'"
                >未注册</el-tag
              > -->
              <span style="color:#E6A23C" v-if="scope.row.status == 'INACTIVE'">未注册</span>
              <span style="color:#67C23A" v-if="scope.row.status == 'ONLINE'">在线</span>
              <span style="color:#F56C6C" v-if="scope.row.status == 'OFFLINE'">离线</span>
              <span style="color:#F56C6C" v-if="scope.row.status == 'WARNING'">告警</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { details } from "@/api/site/site";
export default {
  data() {
    return {
      searchSite: {},
      infoData: {},
      tableData1: [],
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  mounted() {
    let id = this.$route.query.id;
    this.getDetail(id);
  },
  methods: {
    getDetail(id) {
      details(id).then((res) => {

        if (res.code == 200) {
          this.infoData = res.data;
          this.tableData1 = res.data.deviceList;
        }
      });
    },
    qureySearch() { },
    getPageList() { },
    handleSelectionChange() { },
  },
};
</script>

<style lang="scss" scoped>
.sitedetail {
  padding: 20px;
  .top {
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    > div {
      font-size: 16px;
      // color: #333;
      margin-right: 30px;
      span {
        // font-weight: bold;
      }
    }
  }
}
</style>